<template>
	<view>
		<view class="readsetting-every">
			<view class="readsetting-font">
				<view class="readsetting-font-box" style="margin: 0 -70px 0 15px;width: 70px;" @click="decreaseFontSize">
					<text class="iconfont icon-24gl-fontSizeDecrease" style="font-size: 20px;"></text>
				</view>
				{{fontSize}}
				<view class="readsetting-font-box" style="margin: 0 0px 0 -70px;width: 70px;" @click="increaseFontSize">
					<text class="iconfont icon-24gl-fontSizeIncrease" style="font-size: 20px;"></text>
				</view>
				<view class="readsetting-font-box" style="margin: 0 0px 0 -70px;">
					<text>字体</text>
				</view>
				<view class="readsetting-font-box" style="margin: 0 20px 0 -70px;">
					<text>繁</text>
				</view>
			</view>
			<view class="readsetting-bg">
				<view class="readsetting-bg-box" @click="setBgColor(item)" v-for="item in colorlist" :style="{ backgroundColor: item}">

				</view>
				<text class="iconfont icon-gengduo1"></text>
			</view>
			<view class="readsetting-way">
				<view class="readsetting-way-box" v-for="(item, index) in btnlist" @click="goIndex(index)">
					<text class="iconfont" :class="item.icon"></text>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import '@/common/iconfont.css'
	import { ref } from 'vue';
	import {
		useNovelStore
	} from '../../common/novel/novel.js';
	import {
		useTextLayoutStore
	} from '../../common/novel/textLayout.js';
	import { useComStore } from '../../common/common.js';
	
	// 初始化 store
	const store = useNovelStore();
	const textLayoutStore = useTextLayoutStore();
	const comStore=useComStore();
	
	// 定义事件
	const emit = defineEmits(['font-size-change']);

	// 使用textLayoutStore中的字体大小
	const fontSize = ref(textLayoutStore.fontSize);

	const colorlist = ref([
		"#fff",
		"#ffe3a0",
		"#949494",
		"#d8ffe8",
		"#a28cfa",
	]);
	
	const btnlist = ref([
		{ name: "翻页方式", icon: "icon-langdu" },
		{ name: "自动翻页", icon: "icon-lingdu" },
		{ name: "横屏", icon: "icon-mobile-shake" },
		{ name: "高级设置", icon: "icon-shezhi4" },
	]);

	const goIndex = (index) => {
		if(index==0){
			store.isPageway=true;
		}
		store.isReadsetting=false;
	};

	// 字体大小调整函数
	const increaseFontSize = () => {
		if (fontSize.value < 48) { // 设置最大字体大小
			fontSize.value += 1;
			emit('font-size-change', fontSize.value);
		}
	};

	const decreaseFontSize = () => {
		if (fontSize.value > 12) { // 设置最小字体大小
			fontSize.value -= 1;
			emit('font-size-change', fontSize.value);
		}
	};
	
	const setBgColor=(item)=>{
		console.log(item);
		comStore.setPageColor(item);
	}
</script>

<style lang="scss">
	@import '/common/novel/novel.scss';

	.readsetting-every {
		width: 100vw;
		height: 21vh;
		position: absolute;
		bottom: 0px;
		background-color: var(--bg-color);
		display: flex;
		flex-direction: column;

		padding-bottom: env(safe-area-inset-bottom, 0);
		padding-bottom: constant(safe-area-inset-bottom, 0);

		.readsetting-font {
			flex: 1;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			font-size: 12px;
			color: #fff;

			.readsetting-font-box {
				border-radius: 2px;
				border: 1px solid var(--font-color);
				width: 45px;
				height: 25px;
				border-radius: 6px;
				display: flex;
				align-items: center;
				justify-content: center;

				&:hover {
					border: 1px solid red;
					color: red;
				}
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background-color: var(--font-color);
				transform: scaleY(0.1);
				transform-origin: bottom;
			}
		}

		.readsetting-bg {
			flex: 1;
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;

			.readsetting-bg-box {
				width: 70px;
				height: 25px;
				background-color: #7dff9e;
				border-radius: 5px;
				margin-left: 15px;
				box-sizing: border-box;

				&:hover {
					position: relative;
					border: 1px solid red;
				}
			}

			text {
				width: 40px;
				height: 25px;
				border: 1px solid var(--font-color);
				color: var(--font-color);
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				margin: 0 20px 0 20px;
			}
		}

		.readsetting-way {
			flex: 1;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.readsetting-way-box {
				width: 100px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				text {
					font-size: 20px;
					color: #fff;
				}

				view {
					font-size: 12px;
					color: #fff;
				}
			}
		}
	}
</style>